<template>
  <div class="home-container">
    <el-container class="home-wrapper">
      <!-- 左侧导航菜单 -->
      <el-aside width="220px" class="nav-menu-wrapper">
        <navMenu :menuItems="menuItems"/>
      </el-aside>

      <el-container direction="vertical" class="main-container">
        <!-- 顶部头部区域 -->
        <el-header height="60px" class="header-wrapper">
          <div class="breadcrumb-wrapper">
            <Breadcrumb />
          </div>
          <div class="header-actions">
            <el-row>
              <div class="block" @click="ToPerson">
                <el-avatar
                  shape="square"
                  :size="50"
                  :src="squareUrl"
                  @error="handleAvatarError"
                >
                  <!-- 备用图片（当src加载失败时显示） -->
                  <img
                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                  />
                </el-avatar>
              </div>
            </el-row>
          </div>
        </el-header>

        <!-- 主内容区域 -->
        <el-main class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import navMenu from "@/components/navMenu.vue";
import Breadcrumb from "@/components/breadcrumb.vue";
export default {
  name: "Home",
  components: {
    navMenu,
    Breadcrumb,
  },
  data() {
    return {
      menuItems: [
        {
          name: "首页",
          url: "/manage/index",
          icon: "el-icon-s-home"
        },
         {
          name: "管理",
          url: "/manage/manager",
          icon: "el-icon-s-custom",
          child: [
            {
              name: "比赛管理",
              url: "/manage/manager/competition",
              icon: "el-icon-s-order",
            },
            // {
            //   name: "用户管理",
            //   url: "/manage/manager/users",
            //   icon: "el-icon-s-claim",
            // },
          ],
        },
        {
          name: "个人详情",
          url: "/manage/person",
          icon: "el-icon-user" // Added icon example
        },
        {
          name: "全部比赛",
          url: "/manage/competition",
          icon: "el-icon-trophy",// Added icon example
        },
         {
          name:"私信",
          url: "/manage/privateMessage",
          icon: "el-icon-message" // Added icon example
        },
        {
          name: "讯问AI",
          url: "/manage/ask",
          icon: "el-icon-chat-dot-round" // Added icon example
        },
       
      ],
    };
  },
  computed: {
    squareUrl() {
      return this.$store.state.user.userForm.avatar;
    },
  },
  mounted() {
    this.initUserInfo();
  },
  methods: {

    initUserInfo(){
      this.$store.dispatch("user/initUserInfo");
    },
    // 头像跳转到个人中心
    ToPerson() {
      this.$router.push("/manage/person");
    },
    // 处理头像加载失败
    handleAvatarError() {
      console.log("头像加载失败，已显示备用图片");
      return true; // 返回true以显示默认插槽内容
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .home-wrapper {
    height: 100%;

    .nav-menu-wrapper {
      background-color: #304156;
      transition: width 0.3s;
      height: 100vh;
    }

    .main-container {
      .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

        .breadcrumb-wrapper {
          flex: 1;
        }

        .header-actions {
          .block {
            // padding: 8px 10px;
            margin-right: 20px;
            cursor: pointer; /* 添加指针样式表示可点击 */
          }
        }
      }

      .content-wrapper {
        padding: 0px;
        background-color: #f0f2f5;
        height: calc(100vh - 60px);
        overflow: auto;
      }
    }
  }
}

/* 路由切换动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>
